<template>
    <div>
      <div class="header">
        <div class="title"><text>动态管理</text></div>
  
        <el-button type="primary" class="el-icon-circle-plus-outline" size="small" style="margin-left: 40px;"
          @click="dialogFormVisible = true">添加教室
        </el-button>
        <input type="text" placeholder=" 输入教室"  v-model="queryinfo.name"
          style="margin-left: 20px; background-color: rgb(233, 237, 240); border: 1px solid #999; border-right:none; height: 28px;">
        <button class="el-icon-search"
          style="border: 1px solid #999; border-left: none; height: 30px; width: 40px;" @click="classlist"></button>
      </div>
      <!-- 列表 -->
      <el-card class="box-card">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="教室名称" width="180">
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template v-slot:default="">
              <el-tooltip class="item" effect="light" content="编辑当前数据" placement="right" :enterable="false">
                <el-button style="background-color: #409eff; color: #fff" class="el-icon-edit" size="mini"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="light" content="点击删除当前数据" placement="right" :enterable="false">
                <el-button style="background-color: #f56c6c; color: #fff" class="el-icon-delete" size="mini"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinfo.page"
        :page-sizes="[1, 2, 3, 5]"
        :page-size="queryinfo.psize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      </el-card>
    </div>
    <!-- 添加 -->
    <el-dialog title="添加教室" v-model="dialogFormVisible">
      <el-form ref="form" :rules="rules" :model="form">
  
        <el-form-item label="教室名称" prop="name" :label-width="formLabelWidth">
          <el-input v-model="form.name" style="margin-right: 150px; width: 300px;" size="small" autocomplete="off">
          </el-input>
        </el-form-item>
  
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitinsert('form')">确 定</el-button>
        </span>
      </template>
  
    </el-dialog>
  </template>
  <script>
    export default {
      data() {
        return {
          dialogFormVisible: false,
          tableData:[],
          queryinfo:{
            page:1,
            psize:3,
            name:'',
          },
          total:0,
          form:{
              name:''
          },
          rules:{
              name:[
              {
                required: true,
                message: '请输入教师名称',
                trigger: 'blur'
              },
              {
                min: 2,
                max: 10,
                message: '长度在 2 到 10 个字符',
                trigger: 'blur'
              }
              ]
          }
        }
      },
      created(){
        this.classlist()
      },
      methods: {
        handleSizeChange(val) {
          this.queryinfo.psize=val
          this.classlist()
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.queryinfo.page=val
        this.classlist()
        console.log(`当前页: ${val}`);
      },
          async classlist(){
          let self = this
          let token = window.sessionStorage.getItem('access_token')
          const {data: res } = await this.$http.get('http://www.eshareedu.cn/edusystems/api/classrooms/list',{params:this.queryinfo})
          // console.log(res)
          if (res.errCode == '10000') {
            this.tableData = res.data.list
            this.total=res.data.counts
          }
          // console.log(self.tableData)
        },
      //   添加
         async submitinsert(){
          let token = window.sessionStorage.getItem('access_token')
          // console.log(token)
          const {
            data: res
          } = await this.$http.post('http://www.eshareedu.cn/edusystems/api/classrooms/add',this.form,{ headers: {token}})
          // console.log(res)
          if(res.errCode != '10000'){
             this.$message.error('添加失败')
          }else{
            this.$message.success('添加成功')
            this.dialogFormVisible = false,
            this.classlist()
          }
         }
      }
    }
  
  </script>
  <style scoped>
    .header {
      width: 100%;
      display: flex;
      height: 50px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      box-shadow: 1px 1px 3px 1px rgb(200, 226, 241);
      background-color: rgb(233, 237, 240);
      align-items: center;
    }
  
    .title {
      font-size: 15px;
      font-weight: bold;
      margin-left: 20px;
    }
  
  </style>
  